<template>
  <el-card shadow="never" class="margin-top-20 margin-left-20 margin-right-20">
    <!--  -->
    <el-row :gutter="20">
      <!-- 添加按钮  -->
      <el-col :span="6">
        <el-button size="medium" @click="handleClick({})">添加角色</el-button>
        <i class="el-icon-refresh margin-left-10 cursor-pointer" @click="getData" />
      </el-col>
    </el-row>
    <!-- 列表属性及操作 -->

    <el-table  class="margin-top-10" :data="tableData">
      <el-table-column label="角色名称" prop="lable" min-width="180" />
      <el-table-column label="角色介绍" prop="title" min-width="130" />
      <el-table-column label="创建时间" min-width="200" prop="c_time" />
      <el-table-column label="是否默认角色" align="center" min-width="150">
        <template slot-scope="scope">
          <div
            class="
              l-flex
              align-items-center
              padding-top-10
              justify-content-center
            "
          >
            <el-tag v-if="scope.row.is_default == 1" size="small">是</el-tag>
            <el-tag v-else size="small" type="warning"> 否 </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClick(scope.row)">
            编辑
          </el-button>
          <el-divider direction="vertical" />

          <el-button type="text" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="margin-top-10 text-align-right"
      background
      layout="prev, pager, next"
      :current-page.sync="page"
      :total="total"
      @current-change="currentChange"
    />

    <el-drawer
      :visible.sync="drawer"
      :before-close="handleClose"
      :with-header="false"
    >
      <div class="drawer-title">
        <span>{{ title }}</span>
        <i class="el-icon-close cursor-pointer" @click="drawer = false" />
      </div>
      <div class="drawer-content">
        <el-row>
          <el-col :span="24">
            <div class="padding-left-16 text-14 padding-top-10">角色名称</div>
            <div class="padding-left-16 padding-right-16 padding-top-10">
              <el-input v-model="itemUser.lable" size="small" />
            </div>
          </el-col>
          <el-col :span="24">
            <div class="padding-left-16 text-14 padding-top-10">角色介绍</div>
            <div class="padding-left-16 padding-right-16 padding-top-10">
              <el-input v-model="itemUser.title" size="small" />
            </div>
          </el-col>
          <el-col :span="24">
            <el-col :span="10">
              <div class="padding-left-16 text-14 padding-top-10">
                是否默认角色
              </div>
            </el-col>
            <el-col :span="14">
              <div class="padding-left-16 padding-right-16 padding-top-10">
                <el-switch
                  v-model="itemUser.is_default"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <div class="drawer-botton">
        <el-button type="primary" size="small" @click="handleEdit(itemUser)">
          确定
        </el-button>
      </div>
    </el-drawer>
  </el-card>
</template>
<script>
import { getRoles, deleteRoles, createRoles } from "@/api/user";

export default {
  data() {
    return {
      property: "value",
      page: 1,
      title: "编辑角色",

      tableData: null,
      drawer: false,
      itemUser: {},
      total: 0,
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    handleEdit(row){
      row.is_default = row.is_default?1:0
      createRoles(row).then(res=>{
        console.log(res);
      this.drawer = false;

        this.getData();
      })
    },
    getData() {
      getRoles({page:this.page}).then((res) => {
        this.tableData = res.data.lists;
        this.total = res.data.total;
      });
    },
    handleClick(item) {
      this.drawer = true;
      this.itemUser = item;
    },
    handleClose() {},
    currentChange() {
      this.getData();
    },
    createRoles() {
      createRoles();
    },
    deleteRoles() {
      deleteRoles();
    },
  },
};
</script>
